<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      margin-top:10px;
    }
    .bgc {
      background-color: green;
    }
    .fontSize30 {
      font-size: 30px;
    }
    .width200 {
      width: 200px;
    }

  </style>

</head>
<body>
  <input type="button" value="添加类" id="addClass"/>
  <input type="button" value="移除类" id="removeClass"/>
  <input type="button" value="判断类" id="hasClass"/>
  <input type="button" value="切换类" id="toggleClass"/>
  <div id="div1" class="bgc ">div1</div>
</body>
</html>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
  $('#addClass').click(function(){
    // 单个的添加属性
    // $('#div1').addClass('fontSize30')
    // 多个添加属性
    $('#div1').addClass('fontSize30 width200')

  })
  $('#removeClass').click(function(){
    // 单个的移除属性
    $('#div1').removeClass('fontSize30')
    // 多个属性移除
    $('#div1').removeClass('fontSize30 width200')
    // $('#div1').removeClass()移除所有的样式包括已经设置好的

  })
  $('#hasClass').click(function(){
    console.log($('#div1').hasClass('fontSize30'));//添加了为true 否则为false
  })
  $('#toggleClass').click(function(){
   $('#div1').toggleClass();
  //  切换添加，移除的样式，里面不写参数直接移除掉所有的样式
  })
  });
</script>